<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shadow DOM Test</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 8px; /* Minimal padding */
            margin: 0;
            line-height: 1.3; /* Tight line height */
            font-size: 13px; /* Smaller base font */
            background-color: #f4f4f4; /* So we can see page boundaries */
            /* height: 98vh; Optional: try to constrain for testing, but browser chrome varies */
            /* overflow: hidden; Optional: Prevent body scrollbar for testing */
        }
        h1 {
            font-size: 1.3em; /* Smaller H1 */
            border-bottom: 1px solid #ccc;
            padding-bottom: 3px;
            margin: 0 0 10px 0; /* Minimal margins */
        }
        .input-row {
            margin-bottom: 6px; /* Minimal space between rows */
            padding: 4px 5px;
            border: 1px solid #e0e0e0;
            background-color: #fff;
            display: flex; /* For label and input alignment */
            align-items: center; /* Vertically align items in the row */
            min-height: 30px; /* Ensure some consistent height */
        }
        label {
            font-weight: bold;
            margin-right: 8px;
            min-width: 65px; /* Give labels some consistent space */
            font-size: 0.95em;
            flex-shrink: 0; /* Prevent label from shrinking */
        }
        input, select, video, details, summary, button {
            font-size: 0.95em; /* Smaller font for inputs */
            padding: 4px 5px; /* Minimal padding */
            border: 1px solid #bbb;
            border-radius: 3px;
            margin: 0; /* Remove default margins */
            vertical-align: middle; /* Align nicely in flex row */
            box-sizing: border-box;
        }
        input[type="color"] {
            height: 30px; /* Specific height for color picker */
            padding: 2px; /* Minimal padding for color */
            width: 45px;
        }
        input[type="range"] {
            padding: 0; /* Range usually doesn't need padding */
            flex-grow: 1; /* Allow range to take available space */
            min-width: 80px;
        }
        input[type="file"] {
            padding: 2px 4px; /* Special minimal padding for file */
            max-width: 200px; /* Prevent file input from getting too wide */
        }
        select {
            min-width: 120px;
        }
        video {
            display: inline-block;
            width: 150px; /* Very small video */
            height: auto; /* Auto height based on width */
            border: 1px solid #aaa;
            background-color: #333; /* Dark background for poster visibility */
        }
        details {
            background-color: #f9f9f9;
            flex-grow: 1; /* Allow details to take available space */
        }
        details summary {
            cursor: pointer;
            padding: 4px 6px;
        }
        .target-interactive { /* Style target inputs/buttons/summary directly */
            background-color: yellow !important;
            border: 1px solid orange !important;
            font-weight: bold;
        }
        .target-indicator { /* If a separate span indicates the target area */
            background-color: yellow;
            border: 1px solid orange;
            padding: 2px 4px;
            font-weight: bold;
            display: inline-block;
            margin-left: 8px;
            font-size: 0.9em;
        }
        .info {
            font-size: 0.9em; color: #333; margin-bottom: 8px;
        }
    </style>
</head>
<body>
    <h1>Native Shadow DOM Inputs</h1>
    <p class="info">Interacting with these often involves browser-native Shadow DOM UI.</p>

    <div class="input-row">
        <label for="native_date">Date:</label>
        <input type="date" id="native_date" class="target-interactive">
    </div>

    <div class="input-row">
        <label for="native_color">Color:</label>
        <input type="color" id="native_color" value="#2196F3" class="target-interactive">
    </div>

    <div class="input-row">
        <label for="native_file">File:</label>
        <input type="file" id="native_file" class="target-interactive">
    </div>

    <div class="input-row">
        <label for="native_select">Select:</label>
        <select id="native_select" class="target-interactive">
            <option value="opt1">Option 1</option>
            <option value="opt2_target_val">Option 2 (Target)</option>
            <option value="opt3">Option 3</option>
        </select>
    </div>

    <div class="input-row">
        <label for="native_range">Range:</label>
        <input type="range" id="native_range" min="0" max="100" value="70" class="target-interactive">
    </div>

    <div class="input-row">
        <label for="native_video">Video:</label>
        <video id="native_video" controls poster="">
             <!-- 1x1 transparent GIF poster -->
        </video>
        <span class="target-indicator" id="target_video_controls_area">Controls</span>
    </div>

    <div class="input-row">
        <label for="native_details_summary">Details:</label>
        <details id="native_details">
            <summary id="native_details_summary" class="target-interactive">Reveal Info</summary>
            <p style="font-size:0.9em; padding:4px; margin:3px 0; background-color: #fff;">Content hidden initially.</p>
        </details>
    </div>

    <div class="input-row">
        <label for="native_search">Search:</label>
        <input type="search" id="native_search" placeholder="Search here (clear X?)" class="target-interactive" style="flex-grow:1;">
    </div>

    <div class="input-row">
        <label for="native_pass">Password:</label>
        <input type="password" id="native_pass" value="secret123" class="target-interactive" style="flex-grow:1;">
        <span class="target-indicator" id="target_pass_toggle_area">Toggle?</span>
    </div>

    <div class="input-row">
        <label for="std_text">Text:</label>
        <input type="text" id="std_text" placeholder="Standard text input" style="flex-grow:1;">
        <button id="target_std_btn" class="target-interactive" style="margin-left:5px;padding:4px 8px;">Btn</button>
    </div>

    <div class="input-row">
        <label for="custom_select">Custom Select:</label>
        <shadow-select id="custom_select"></shadow-select>
    </div>

    <script>
    class ShadowSelect extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        const select = document.createElement('select');
        select.innerHTML = `
          <option value="a">Option A</option>
          <option value="b">Option B</option>
        `;
        this.shadowRoot.appendChild(select);
      }
    }
    customElements.define('shadow-select', ShadowSelect);
    </script>

</body>
</html>
